<template>
  <div v-if="tableLoading" class="w-full h-52 flex-center guat-card">正在加载...</div>
  <a-scrollbar
    v-else
    :style="{
      height: `${windowHeight - 152}px`,
      overflow: 'auto',
    }"
  >
    <table class="w-full mt-[-16px] border-separate border-spacing-y-4">
      <BaseTableRow v-for="record in tableData" :row-config="tableColumns" :record="record" />
    </table>
    <div class="flex-xb-yc">
      <div class="flex gap-4">
        <div class="flex-y-center text-base guat-card">
          当前已选中
          <a-tag class="mx-2" color="blue">{{ tableSelectedRow.length }}</a-tag> 条记录
        </div>
        <div class="flex-y-center h-14 guat-card cursor-pointer" @click="handleOnCheckAll">
          <span>{{ isSelectAll ? "取消全选" : "全选" }}</span>
        </div>
      </div>
      <div class="guat-card py-[10px]">
        <a-pagination
          size="large"
          :total="tableData.length"
          show-total
          show-jumper
          show-page-size
        />
      </div>
    </div>
  </a-scrollbar>
</template>

<script setup lang="ts">
import { isEqual } from "lodash-es";
import { TABLE_CONTEXT } from "./config";
import type { TableColumn, TableRegister, TableRow } from "./types";
import BaseTableRow from "./component/BaseTableRow.vue";

const emits = defineEmits<{
  (e: "on-select", data: any[]): void;
}>();

const props = defineProps<{
  /**
   * @description 表格 key
   */
  tableKey: InjectionKey<TableRegister>;

  /**
   * @description 表格的列配置
   */
  tableColumns: TableColumn[];
}>();

let windowListener: any = null;
const windowHeight = ref(window.innerHeight);
const tableData = ref<TableRow[]>([]);
const tableSelectedRow = computed(() => unref(tableData).filter((record) => record.isChecked));
const tableLoading = ref<boolean>(false);
const tableRegister = inject(props.tableKey);

/**
 * 表示当前是否处于 [全选] 的状态
 */
const isSelectAll = ref(false);
const isShowCheckbox = ref(true);

const setTableData = (rawData: any[]) => {
  const data: TableRow[] = rawData.map((record) => ({
    isChecked: false,
    rowData: record,
  }));
  tableData.value = data;
};

const handleOnCheckAll = () => {
  if (!unref(isShowCheckbox)) return;
  tableData.value.forEach((record) => (record.isChecked = !unref(isSelectAll)));
};

// const handleOnShowCheckbox = () => {
//   if (unref(isShowCheckbox)) tableData.value.forEach((record) => (record.isChecked = false));
//   isShowCheckbox.value = !unref(isShowCheckbox);
// };

const handleOnClickCheckbox = (clickedRecord: any) => {
  const rowIndex = unref(tableData).findIndex((record) => isEqual(record.rowData, clickedRecord));
  unref(tableData)[rowIndex].isChecked = !unref(tableData)[rowIndex].isChecked;
};

const setTableLoading = (isLoading: boolean) => {
  tableLoading.value = isLoading;
};

const setTableCheckboxVisible = (isShow: boolean) => {
  isShowCheckbox.value = isShow;
};

watch(
  () => tableSelectedRow.value.length,
  () => {
    isSelectAll.value = unref(tableSelectedRow).length == unref(tableData).length;
  }
);

provide(TABLE_CONTEXT, {
  isShowCheckbox,
  handleOnClickCheckbox,
});

onMounted(() => {
  tableRegister?.({
    setTableData,
    setTableLoading,
    setTableCheckboxVisible,
  });
  window.addEventListener(
    "resize",
    (windowListener = () => {
      windowHeight.value = window.innerHeight;
    })
  );
});

onUnmounted(() => {
  windowListener && window.removeEventListener("resize", windowListener);
});
</script>

<style scoped></style>
